<template>
  <div class="wrapper" :class="type">
    <div class="title_da">热门旺铺转让</div>
    <div class="title_xiao">海量真实铺源，人工审核、实地验证，免费发布店铺信息。 </div>
    <ul class="shop_ul" v-if="type=='one'">
      <li @click="typeid = 0" :class="{action:typeid == 0}">餐饮酒楼</li>
      <li @click="typeid = 1" :class="{action:typeid == 1}">休闲娱乐</li>
    </ul>
    <ul class="shop_ul" v-if="type=='two'">
      <li @click="typeid = 2">美容美发</li>
    </ul>
    <ul class="shop_ul" v-if="type=='there'">
      <li @click="typeid = 3">教育培训</li>
    </ul>
    <div class="wrappericon">
      <div class="wrappericon_ul">
        <van-swipe class="my-swipe" :autoplay="5000">
          <van-swipe-item  v-for="(item, index) in list[typeid].list" :key="index">
            <img class="da" :src="baseUrl + item.store_images">
            <img class="xiaoT" :src="baseUrl + item.store_imagesTX">
            <img class="xiaoB" :src="baseUrl + item.store_imagesDX">
            <div class="clearfix"></div>
            <div>
                <div class="title_swipe">{{item.store_title}}</div>
                <div class="city_swipe">详细地址：{{item.store_city}}</div>
                <div class="swipe_div">
                    <div>建筑面积:{{item.store_area}}㎡</div>
                    <div>层高:{{item.floor_height}}m</div>
                </div>
                <div class="swipe_div">
                    <div>进深:{{item.go_deep}}m</div>
                    <div>面宽:{{item.width}}m</div>
                </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <router-link class="experience" tag="div" :to="'/viewShop/'">了解更多商铺信息</router-link>
  </div>
</template>

<script>
import Blist from '../../../assets/json/zt.json'
export default {
  name: 'CompanyProvide',
  props: {
    type: String
  },
  data () {
    return {
      list: Blist,
      typeid: 0
    }
  },
  mounted () {
    if (this.type === 'one') {
      this.typeid = 0
    } else if (this.type === 'two') {
      this.typeid = 2
    } else if (this.type === 'there') {
      this.typeid = 3
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  border-radius 5px
  padding 0rem /* 26/50 */ .4rem 0rem /* 28/50 */ .4rem
  position relative
  margin-top 1.06rem /* 53/50 */
  .title_da
    font-size .7rem /* 35/50 */
    height 1.1rem /* 55/50 */
    line-height 1.1rem /* 55/50 */
    text-align center
    font-weight 800
    color rgba(0,0,0,.9)
  .title_xiao
    font-size .28rem /* 14/50 */
    text-align center
    color rgba(0,0,0,.7)
    line-height .46rem /* 23/50 */
    margin-bottom .4rem /* 20/50 */
  .shop_ul
    width 100%
    display flex
    margin-bottom .36rem /* 18/50 */
    justify-content space-between
    padding-left .3rem /* 15/50 */
    li
      width 2.8rem /* 140/50 */
      height .8rem /* 39/50 */
      line-height .72rem /* 39/50 */
      color #fff
      font-size .3rem /* 15/50 */
      text-align center
      margin-left .2rem /* 10/50 */
      border-radius .2rem /* 10/50 */
      position relative
      z-index 10
      top 0px
    li:nth-child(1)
      margin-left 0px
    .action
      font-weight bold
    .action:after
      bottom .04rem /* 3/50 */
    li:after
      width 100%
      height .72rem
      content ""
      position absolute
      bottom .08rem /* 3/50 */
      left 0
      right 0
      z-index -1
      border-radius .2rem
  .wrappericon
    width 100%
    height 6.9rem /* 345/50 */
    border-radius .1rem /* 5/50 */
    padding-top .06rem /* 3/50 */
    .wrappericon_ul
      width 100%
      height 6.8rem /* 340/50 */
      background #ffffff
      border-radius .1rem /* 5/50 */
      padding-bottom .7rem /* 35/50 */
      padding .3rem /* 15/50 */
      img
        float left
        border-radius 5px
      img.da
        width 61%
        height 3.66rem /* 183/50 */
        object-fit cover
        margin-right 2%
      img.xiaoT
        width 37%
        height 1.74rem /* 87/50 */
        margin-bottom 10px
      img.xiaoB
        width 37%
        height 1.74rem /* 87/50 */
      .title_swipe
        font-size .3rem /* 15/50 */
        line-height .3rem /* 15/50 */
        margin-top .3rem /* 15/50 */
        font-weight bold
      .city_swipe
        font-size .26rem /* 13/50 */
        font-weight 500
        line-height .26rem /* 13/50 */
        margin-top .18rem /* 9/50 */
        margin-bottom .3rem /* 5/50 */
      .swipe_div
        display flex
        line-height .26rem /* 13/50 */
        margin-top .2rem /* 10/50 */
        text-align left
        div
          width 50%
  .experience
    width 90%
    height 1rem /* 45/50 */
    line-height 1rem
    text-align center
    border-radius .1rem /* 5/50 */
    font-size .4rem /* 20/50 */
    font-weight bold
    color #fff
    margin-left 5%
    margin-top 1.14rem /* 57/50 */
  /deep/ .van-swipe__indicators
    bottom .06rem /* 3/50 */
  /deep/ .van-swipe__track
    height 6.2rem
.one
  .shop_ul
    li
      background #B9480A
      box-shadow 0px 2px 0px 0px rgba(180, 72, 13, 0.3)
    li:after
      background #D85710
    .action:after
      background #B9480A
      border 1px solid #FC772E
  .wrappericon
    background #D77D50
  .title
    color #652705
  .experience
    background #B9480A
    border 2px solid #AD4309
    box-shadow 0px 3px 0px 0px rgba(126, 47, 4, 0.3)
  /deep/ .van-swipe__indicator--active
    background-color #B9480A
.two
  .shop_ul
    justify-content center
    padding-left 0
    li
      background #B90A0A
      box-shadow 0px 2px 0px 0px rgba(183, 7, 13, 0.3)
    li:after
      background #D81010
    .action:after
      background #B90A0A
      border 1px solid #F24A4F
  .wrappericon
    background #E66D71
  .title
    color #7D0509
  .experience
    background #C3080E
    border 2px solid #B4070B
    box-shadow 0px 3px 0px 0px rgba(167, 5, 9, 0.3)
  /deep/ .van-swipe__indicator--active
    background-color #C3080E
.there
  .shop_ul
    justify-content center
    padding-left 0
    li
      background #0A5B94
      box-shadow 0px 2px 0px 0px rgba(7, 113, 187, 0.3)
    li:after
      background #0B7DCD
    .action:after
      background #0A5B94
      border 1px solid #3DA6EF
  .wrappericon
    background #7AA1F1
  .title
    color #05385C
  .experience
    background #085B95
    border 2px solid #095194
    box-shadow 0px 3px 0px 0px rgba(93, 162, 223, 0.5)
  /deep/ .van-swipe__indicator--active
    background-color #085B95
</style>
